<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>webocr</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="supported-color-schemes" content="light dark">
    <meta name="theme-color" content="#ffffff" />
    <link rel="manifest" href="./manifest.json">
    <link rel="icon" href="./logo/logo.svg" type="image/x-icon">
    <link rel="apple-touch-icon" href="./logo/logo.svg">
</head>

<body>
    <div id="main">
        <div id="img_input" class="w-full flex p-2">
            <input type="file" name="upload" id="upload" multiple class="hidden">
            <div id="drop"
                class="w-full h-80 flex justify-center items-center border-dotted border-2 border-cyan-400 rounded">
                <div id="file_input" class="icon-m shadow-sm rounded-sm mr-1 bg-cyan-100"><img
                        src="./assets/icons/upload.svg" class="icon"></div><span
                    class="opacity-75 select-none">拖拽或粘贴图像到此处</span>
            </div>
        </div>
        <div id="text_output" class="p-2 grid gap-1">
            <div id="run" class="icon-m shadow-sm rounded-sm bg-cyan-100 w-16"><img src="./assets/icons/ocr.svg"
                    class="icon"></div>
            <div id="close" class="icon-m shadow-sm rounded-sm bg-cyan-100 w-16"><img src="./assets/icons/close.svg"
                    class="icon"></div>
            <textarea name="r" id="r"
                class="resize-none focus:outline-none border-2 border-cyan-400 rounded"></textarea>
        </div>
        <div id="img_view"></div>
    </div>
    <footer class="flex gap-4 flex-wrap items-center flex-col md:flex-row md:justify-evenly">
        <div class="w-full flex flex-col md:flex-row">
            <a href="https://esearch-app.netlify.app/" target="_blank" rel="noopener noreferrer" class="w-full">
                <div class="other_software">
                    <img src="./assets/other/eSearch.svg" alt="eSearch_logo">
                    <div class="font-semibold text-xl">eSearch</div>
                    <div>截屏 离线OCR 搜索翻译 以图搜图 贴图 录屏 滚动截屏 </div>
                    <div>更强的本地OCR引擎，速度大约提升6倍⚡️<br>可直接截屏后识别，识别后搜索翻译</div>
                </div>
            </a>
            <a href="https://xlinkote.netlify.app" target="_blank" rel="noopener noreferrer" class="w-full">
                <div class="other_software">
                    <img src="./assets/other/xlinkote.svg" alt="eSearch_logo">
                    <div class="font-semibold text-xl">xlinkote</div>
                    <div>无限画布白板 知识管理笔记 </div>
                    <div>上传图片、pdf转换为文字，自由管理知识</div>
                </div>
            </a>
        </div>
        <div id="about">
            <div class="flex items-center flex-col">
                <img src="./public/logo/logo.svg" alt="logo" width="64">
                <div class="font-semibold text-xl">webocr</div>
                <div>本地ocr识别</div>
            </div>
        </div>
        <div class="flex flex-col items-center gap-2">
            <div class="flex gap-1">
                <a href="https://github.com/xushengfeng/webocr" target="_bank"><img src="./assets/other/Github.svg"
                        alt="Github"></a>
                <a href="https://gitee.com/xsf-root/webocr" target="_bank"><img src="./assets/other/Gitee.svg"
                        alt="Gitee"></a>
            </div>
            <div>
                <a href="https://github.com/xushengfeng/webocr" target="_bank"><img
                        src="https://img.shields.io/github/stars/xushengfeng/webocr?style=social" alt="Github star"></a>
            </div>
            <div>
                <a href="https://www.netlify.com" target="_blank"> <img
                        src="https://www.netlify.com/v3/img/components/netlify-light.svg" alt="Deploys by Netlify" />
                </a>
            </div>

        </div>
        <div id="link" class="flex flex-col">
            <a href="http://fanyishu.netlify.app" target="_blank" rel="noopener noreferrer">翻译树</a>
            <a href="https://yuansou.netlify.app" target="_blank" rel="noopener noreferrer">eSearch 元搜索引擎</a>
        </div>
    </footer>
</body>

<script src="https://unpkg.com/opencv.js@1.2.1/opencv.js"></script>
<script src="https://unpkg.com/onnxruntime-web@1.13.1/dist/ort.min.js"></script>
<script type="module" src="./src/js/js.ts"></script>

</html>